<template>
	<section class="wrapper key-word">
		<el-form>
      <el-row  :gutter="20">
        <el-col :span="4">
          <el-form-item label="品牌名称：" style='max-width: 217px;'>
            <el-autocomplete
              v-model="value"
              size="small"
              icon='search'
              :fetch-suggestions="querySearchAsync"
              placeholder="请选择品牌名称"
              @select="handleSelect"
              @blur='ifSelect'
            ></el-autocomplete>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item style='max-width: 217px;' label="sku关键词：">
            <el-autocomplete
            	size="small"
              v-model="keyWord"
              :fetch-suggestions="querySearchAsync1"
              placeholder="sku关键词"
              :trigger-on-focus="false"
              @select="handleSelect1"
            ></el-autocomplete>
          </el-form-item>
        </el-col>

        <!--<el-col :span="4">
          <el-form-item label="计划名称：" style='max-width: 217px;'>
            <el-autocomplete
              v-model="status"
              size="small"
              icon='search'
              :fetch-suggestions="querySearchAsync"
              placeholder="计划名称"
              @select="handleSelect"
              @blur='ifSelect'
            ></el-autocomplete>
          </el-form-item>
        </el-col>-->
      </el-row>
      
      <el-row>
          <el-col :span="24" class="action_col">
              <el-form-item class="action_button_group_open">
                  <el-button size="small" type="primary" @click="clearSearch"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                  </el-button>
                  <el-button size="small" type="primary" @click="submitSearch" icon="el-icon-search">查询</el-button>
              </el-form-item>
          </el-col>
      </el-row>
      
      <el-row>
          <el-button size="small" icon="el-icon-plus" @click="addNew">添加</el-button>
          <el-button size="small" @click="delAll">批量删除</el-button>
          <el-button size="small" icon="el-icon-plus" @click="chooseFile">批量添加</el-button>
          <input type="file" style="display:none;" id="file" @change="uploadSome" accept="text/csv">
          </el-upload>

          <!--<el-button :disabled="searchId.length==0" icon="el-icon-plus"  size="small" @click="">添加至监控命令</el-button>
          <el-button :disabled="searchId.length==0" icon="el-icon-minus"  size="small" @click="">取消监控</el-button>-->
      </el-row>
      
      <el-row class="customer_row margin-table">
          <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change='getDelList'>
                <el-table-column
                  type="selection">
                </el-table-column>
                <el-table-column
                  prop="brandName"
                  align='center'
                  label="品牌"
                  min-width="100">
                </el-table-column>
                <el-table-column
                  prop="platTypeText"
                  align='center'
                  min-width='70'
                  label="平台">
                </el-table-column>
                <el-table-column
                  prop="searchTypeText"
                  align='center'
                  min-width='150'
                  label="搜索方式">
                  </el-table-column>
                <el-table-column
                  prop="skuWord"
                  align='center'
                  min-width='150'
                  label="sku关键词">
                  <template scope="scope">
                      <div class="customer_col">
                          <nuxt-link style="color: #20a0ff;text-decoration: none;" :to="{ path: '/keyWord/detail', query: { id: scope.row.id,title:scope.row.skuWord}}">
                              {{ scope.row.skuWord}}
                          </nuxt-link>
                      </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="whiteLowText"
                  align='center'
                  min-width='180'
                  label="白名单低价区间">
                </el-table-column>
                <el-table-column
                  prop="lowText"
                  align='center'
                  min-width='180'
                  label="非白名单低价区间">
                </el-table-column>
                <el-table-column
                  prop="fakeText"
                  align='center'
                  min-width='180'
                  label="假货价格区间">
                </el-table-column>
                <el-table-column
                  prop="searchStatus"
                  align='center'
                  min-width='150'
                  label="计划名称">
                </el-table-column>
                <el-table-column
                  prop="option"
                  align='center'
                  fixed='right'
                  width='180'
                  label="操作">
                  <template scope="scope">
                    <div class="operator-btn">
                      <el-button
                         type="primary"
                         size="small"
                         icon="el-icon-edit" 
                         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                      <el-button
                        size="small"
                        type="danger"
                        icon="el-icon-delete" 
                        @click="del(scope.$index, scope.row)">删除</el-button>
                    </div>
	          				
                	</template>
                </el-table-column>
              </el-table>
      </el-row>

      <el-row class="paging" style='margin-top: 40px;'>
          <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
          </el-pagination> 
      </el-row>

    </el-form>

    <!-- 删除提示单个 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogDelVisible1"
      @close="()=>{this.dialogDelVisible1 = false}"
      size="tiny">
      <span>删除后关键词信息不可见，请谨慎操作</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDelVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="del1()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除提示 多选 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogDelVisible"
      @close="()=>{this.dialogDelVisible = false}"
      size="tiny">
      <span>删除后关键词信息不可见，请谨慎操作</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDelVisible = false">取 消</el-button>
        <el-button type="primary" @click="delKeyword()">确 定</el-button>
      </span>
    </el-dialog>

	</section>
</template>
<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import {Row, Col, Form, FormItem, message, Tooltip, Input, Select, Option, DatePicker, ButtonGroup, Tree,Button, Table, TableColumn, Checkbox, CheckboxGroup, Message, MessageBox, Pagination, Dialog, Autocomplete
    } from 'element-ui'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Autocomplete);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Pagination);
    Vue.use(Tooltip);
    Vue.use(Dialog);
    Vue.use(Tree);

    Vue.prototype.$message = Message;

    export default {
      head(){
          return {
              title: "关键词列表",
              meta: [
                  { hid: 'keywordadd', name: 'keywordadd', content: 'keywordadd'}
              ]
          }
      },
      data() {
      	return {
      		tabName: '关键词列表',
          keyWord: '',
          value: '',
          searchId: '',
          status: '',
          brandList: [],
          nameList: [],
          tableData: [
          ],
          delValue: [],
          delSigle: '',
          dialogDelVisible: false,
          dialogDelVisible1: false,
          selectIf: false,//是否点击
      	}
      },
      computed: {
          ...mapGetters({
              'pageTabsList': 'getPageTabsList',
              'currentPage': 'currentPageKeyword',
              'totalCount': 'totalCountKeyword',
              'pageSize': 'pageSizeKeyword',
          })
      },
      watch: {
        value() {
          let p = 0
          let l = ''
          this.brandList.map(brand=>{
            if (brand.value == this.value) {
              p = 1
              l = brand.id
            }
          })
          if (p == 1) {
            this.searchId = l
          }else {
            this.searchId = ''
          }
        },
        keyWord () {
          // this.getList()
        }
      },
      methods: {
        chooseFile() {
          document.getElementById('file').click()
        },
        uploadSome(e) {
          let file = e.target.files["0"]
          let formData = new FormData();
          if (process.BROWSER_BUILD) {
            var token = window.localStorage.getItem('token');
            formData.append('token', token);
          }
          formData.append('file', file);
          this.$store.dispatch('uploadFileKey', formData).then(res=> {
            document.getElementById('file').value = ''
            if (res && res.data) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.$router.go(0)
            }
          }).catch(

          )
        },
        handleCurrentChange(val) {
          this.$store.commit('KEYWORD_CURRENTPAGE',{currentPage:val})
          this.getList()
        },
        handleSizeChange(val) {
          this.$store.commit('KEYWORD_PAGESIZE',{pageSize:val})
          this.getList()
        },
        getBrandList(val) {
          this.$store.dispatch('getSelfBrandsListchu').then((res)=>{
            if (res) {
              this.brandList = res.data.data
              this.brandList.map(list=>{
                Vue.set(list,'value',list.brandName)
              })
            }            
          })
        },
        getListByName(val) {
          this.$store.dispatch('getListByName', {
            kwName: this.keyWord
          }).then((res)=>{
            if (res) {
              this.nameList = res.data.data
            }            
          })
        },
        querySearchAsync(queryString, cb) {
          var restaurants = this.brandList;
          var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
          cb(results);
        },
        createStateFilter(queryString) {
          return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          };
        },
        handleSelect(item) {
          this.selectIf = true
          setTimeout(function (){
            this.selectIf = false
          },100)
          this.searchId = item.id
        },
        ifSelect() {
          if (this.selectIf) {

          }else {
            this.searchId = ''
          }
        },
        querySearchAsync1(queryString, cb) {
          this.$store.dispatch('getListByName', {
            kwName: this.keyWord
          }).then((res)=>{
            if (res) {
              this.nameList = res.data.data
              var restaurants = this.nameList
              var results = restaurants;
              cb(results);
            }            
          })          
        },
        createStateFilter1(queryString) {
          return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          };
        },
        handleSelect1(item) {
          // this.selectIf = true
          // setTimeout(function (){
          //   this.selectIf = false
          // },100)
          // this.searchId = item.id
        },
        clearSearch() {
          this.searchId = ''
          this.value = ''
          this.keyWord = ''
          this.status = ''
          this.$store.commit('KEYWORD_SEARCH_VALUE',{value:this.value})
          this.$store.commit('KEYWORD_SEARCH_KEYWORD',{keyword:this.keyWord})
          this.$store.commit('KEYWORD_SEARCH_ID',{id:this.searchId})
        },
        submitSearch() {
          this.getList()
          this.$store.commit('KEYWORD_SEARCH_VALUE',{value:this.value})
          this.$store.commit('KEYWORD_SEARCH_KEYWORD',{keyword:this.keyWord})
          this.$store.commit('KEYWORD_SEARCH_ID',{id:this.searchId})
        },
        addNew() {
          this.$router.push({path:'/keyWord/add'})
        },
        del(index,row) {
          this.dialogDelVisible1 = true
          this.delSigle = {
            index: index,
            row: row
          }
        },
        del1() {
          this.dialogDelVisible1 = false
          let index = this.delSigle.index
          let row = this.delSigle.row
          this.tableData.splice(index,1)
          this.$store.dispatch('deleteKeyword',{
            keywordIds:row.id
          }).then((res)=>{
            
          })
        },
        getDelList(val) {
          this.delValue = val
        },
        delAll() {
          if (this.delValue.length>0) {
            this.dialogDelVisible = true
          }          
        },
        delKeyword() {
          let delValue = []
          this.delValue.map(value=>{
            delValue.push(value.id)
          })
          this.$store.dispatch('deleteKeyword',{
            keywordIds: delValue.join()
          }).then((res)=>{
            this.getList()
            this.dialogDelVisible = false
          })
        },
        handleEdit(index,row) {
          this.$router.push({path:'/keyWord/edit',query:{id:row.id}})
        },
        getList() {
          this.$store.dispatch('getKeywordsList', {
            brandIds: this.searchId,
            brandName: this.value,
            keywordName: this.keyWord,
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          }).then(res=> {
            if (res && res.data) {
              this.tableData = res.data.data.list
              this.$store.commit('KEYWORD_TOTALCOUNT',{totalCount:res.data.data.total})
            }
          }).catch(

          )
        },
      },
      created () {
        this.value = this.$store.state.keyword.value
        this.keyWord = this.$store.state.keyword.keyword
        this.searchId = this.$store.state.keyword.id
          //pageTab
          if(process.BROWSER_BUILD) {
              if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                  let arr = this.pageTabsList;
                  arr[arr.length-1].name = this.tabName;
                  this.$store.commit('PAGETABSLIST',{data:arr})
              }
          }
          this.getList()
          this.getBrandList()
      }
    }

</script>
<style lang="scss">
	.key-word {
    .el-form-item {
            width: 70%
        }
		.is-center {
			.cell {
				word-break: normal;
				text-overflow: initial;
			}
		}
		.margin-table {
		  margin-top: 20px;
		}
    .select-part {
      position: absolute;
      top: 40px;
      left: 0;
      z-index: 2010;
      box-sizing: border-box;
      background: #fff;
      width: 465px;
      border: 1px solid #bfcbd9;
      border-radius: 4px;
      .bottom {
        .border {
          border-top: 1px solid #bfcbd9;
        }
      }
    }
	}
  
</style>